<template>
  <div>
    <h3 style="margin-top: 10px"><b>五比五拼</b>
        <span style="margin-left:15px;">
          <img src="@/assets/attention-red.png" alt="" style="width:12px;margin-right: 5px;"/>
          <span style="font-size: 14px;">参与五比五拼不改变原有的项目管理方式（即无需额外报工），若最终评为五比五拼标杆项目将额外获得标杆项目奖励。</span>
        </span>
    </h3>
    <a-form-model ref="fiveForm" :model="form" :rules="rules">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item
            label="是否参加五比五拼"
            ref="hasJoin"
            prop="hasJoin"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-radio-group v-model="form.hasJoin" @change="hasJoinChange">
              <a-radio :value="true"> 是 </a-radio>
              <a-radio :value="false"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="8" v-if="form.hasJoin">
          <a-tooltip overlayClassName="tooltip_class">
            <template slot="title">
              ①比管理、拼效益：主要指通过精细化管理创造效益的项目（效率、质量比拼特征明显时，优先归属于比效率/比质量）<br />
              ②比技术、拼结果：主要指通过工艺技术优化创新、设备研发改造、二化等方式创造效益的项目（效率、质量比拼特征明显时，优先归属于比效率/比质量）<br />
              ③比效率、拼产出：主要指以快速交付、高效达成业务目标为主要特征的项目<br />
              ④比质量、拼精品：主要指以产品/工作质量提升为主要特征的项目<br />
              ⑤比贡献、拼业绩：除上述类别外、其他对股份集团经营目标达成贡献较大的、以经济效益为主要特征的项目，主要包括供应链挖潜、财务委挖潜及其他降本增效项目<br />
            </template>
            <a-form-model-item
              label="比拼类型"
              ref="competitionType"
              prop="competitionType"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select
                mode="multiple"
                v-model="competitionType"
                placeholder="请选择比拼类型"
                :options="competitionTypeOptions"
                @change="competitionTypeChange"
              >
                <a-icon slot="suffixIcon" type="plus" />
              </a-select>
            </a-form-model-item>
          </a-tooltip>
        </a-col>
        <a-col :span="8" v-if="form.hasJoin">
          <a-form-model-item
            ref="budgetCost"
            label="经济效益"
            prop="budgetCost"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.budgetCost"
              @blur="
                () => {
                  $refs.budgetCost.onFieldBlur()
                }
              "
              placeholder="请输入经济效益（万元）"
              type="number"
              @change="budgetCostChange"
            >
              <span slot="addonAfter">万元</span>
            </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="form.hasJoin">
        <a-col :span="8">
          <a-form-model-item
            label="项目推进涉及的协作经营体数量是多少"
            ref="twoType"
            prop="twoType"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select v-model="form.twoType" placeholder="请选择" :options="twoTypeOptions" @change="twoTypeChange">
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8" v-if="form.hasJoin">
          <a-form-model-item
            label="是否攻克历史遗留难题或突破关键瓶颈"
            ref="hasConquer"
            prop="hasConquer"
            :label-col="{ span: 12 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-radio-group v-model="form.hasConquer" @change="hasConquerChange">
              <a-radio :value="true"> 是 </a-radio>
              <a-radio :value="false"> 否 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="项目经验可推广至多少个外部经营体"
            ref="threeType"
            prop="threeType"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.threeType"
              placeholder="请选择"
              :options="threeTypeOptions"
              @change="threeTypeChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="form.hasJoin">
        <a-col :span="24">
          <a-form-model-item ref="outOpenRangeName" label="开放范围" prop="outOpenRangeName">
            <a-select
              v-model="outOpenRangeName"
              mode="multiple"
              placeholder="输入账号或者名称查找用户"
              style="width: 100%"
              :filter-option="false"
              :not-found-content="fetching ? '找不到记录' : '找不到记录'"
              @search="fetchOpenUser"
              @change="handleOpenChange"
            >
              <a-spin v-if="fetching" slot="notFoundContent" size="small" />
              <a-select-option v-for="(d, index) in userOpenData" :key="index" :value="d.username">
                {{ d.realname }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="form.hasJoin">
        <a-col :span="24">
          <a-form-model-item
            ref="incomeMethod"
            label="非经济效益"
            prop="incomeMethod"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.incomeMethod"
              @blur="
                () => {
                  $refs.incomeMethod.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
              placeholder="从技术产出/质量改善/效率提升/风控优化及其他贡献维度描述项目的非经济效益"
              @change="incomeMethodChange"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  props: {
    projectBuildId: {
      type: String,
      default: '',
    },
    changeId: {
      Type: String,
      default: '',
    },
  },
  data() {
    return {
      form: {
        twoType: undefined,
        twoTypeName: '',
        threeType: undefined,
        threeTypeName: '',
        competitionType: undefined,
        hasJoin: '',
        hasConquer: '',
        budgetCost: '',
        incomeMethod: '',
        openRange: '',
        openRangeName: '',
      },
      twoTypeOptions: [],
      threeTypeOptions: [],
      competitionTypeOptions: [],
      competitionType: undefined,
      rules: {
        incomeMethod: [
          { required: true, message: '请输入非经济效益', trigger: 'blur' },
          { min: 1, max: 500, message: '非经济效益不超过500个字符', trigger: 'blur' },
        ],
        twoType: [{ required: true, message: '请选择项目推进涉及的协作经营体数量是多少', trigger: 'blur' }],
        threeType: [{ required: true, message: '请选择项目经验可推广至多少个外部经营体', trigger: 'blur' }],
        competitionType: [{ required: true, message: '请选择比拼类型', trigger: 'blur' }],
        hasJoin: [{ required: true, message: '请选择是否参加五比五拼', trigger: 'blur' }],
        budgetCost: [{ required: true, message: '请输入经济效益', trigger: 'blur' }],
        hasConquer: [{ required: true, message: '请选择是否攻克历史遗留难题或突破关键瓶颈', trigger: 'change' }],
      },
      url: {
        codeInfoList: '/manage/codeInfo/list',
        save: '/projectBuild/add',
        queryVOById: '/projectBuild/queryVOById',
        getUserList: '/lib/hteFileClass/getUserListOnlyUpms',
      },
      outOpenRangeName: undefined,
      fetching: false,
      userOpenData: [],
    }
  },
  mounted() {
    if (this.projectBuildId != null && this.projectBuildId != '') {
      this.initData()
    }
  },
  methods: {
    async checkFiveWriteStatus() {
      if (this.form.hasJoin == false) {
        return true
      }
      var validR = false
      try {
        validR = await this.$refs.fiveForm.validate()
      } catch (e) {
        validR = false
      }
      return validR
    },
    fetchOpenUser(val) {
      if (val) {
        this.userOpenData = []
        this.fetching = true
        getAction(this.url.getUserList, { name: val }).then((res) => {
          if (res.success) {
            this.userOpenData = res.result
            this.fetching = false
          }
        })
      }
    },
    handleOpenChange(value, option) {
      this.$set(this.form, 'openRange', value.join(','))
      let arr = []
      option.forEach((item) =>
        arr.push(item.componentOptions.children[0].text ? item.componentOptions.children[0].text.trim() : '')
      )
      this.$set(this.form, 'openRangeName', arr.join(','))
      this.$emit('addField', this.form.openRange, 'openRange')
      this.$emit('addField', this.form.openRangeName, 'openRangeName')
    },
    loadRange(nameList) {
      if (nameList) {
        this.userOpenData = []
        this.fetching = true
        getAction(this.url.getUserList, { nameList: nameList }).then((res) => {
          if (res.success) {
            this.userOpenData = res.result
            this.fetching = false
          }
        })
      }
    },
    hasJoinChange() {
      if (this.form.hasJoin) {
        this.initSubType()
        this.$message.info('参加五拼五拼请填写相关内容')
      }
      this.$emit('addField', this.form.hasJoin, 'hasJoin')
    },
    hasConquerChange() {
      this.$emit('addField', this.form.hasConquer, 'hasConquer')
    },
    twoTypeChange(value, option) {
      this.form.twoTypeName = option.componentOptions.children[0].text
      this.$emit('addField', this.form.twoType, 'twoType')
      this.$emit('addField', this.form.twoTypeName, 'twoTypeName')
    },
    threeTypeChange(value, option) {
      this.form.threeTypeName = option.componentOptions.children[0].text
      this.$emit('addField', this.form.threeType, 'threeType')
      this.$emit('addField', this.form.threeTypeName, 'threeTypeName')
    },
    competitionTypeChange(value) {
      if (value && value.length > 2) {
        this.$message.info('比拼类型选择最多两个')
        this.$set(this.form, 'competitionType', value.join(','))
        this.competitionType = value.slice(0, 2)
        return
      }
      this.$set(this.form, 'competitionType', value.join(','))
      this.$emit('addField', this.form.competitionType, 'competitionType')
    },
    incomeMethodChange() {
      this.$emit('addField', this.form.incomeMethod, 'incomeMethod')
    },
    budgetCostChange() {
      this.$emit('addField', this.form.budgetCost, 'budgetCost')
    },
    initSubType() {
      var vm = this
      getAction(this.url.codeInfoList, { type: '五比五拼项目推进数量', isdel: 0, pageSize: -1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              vm.twoTypeOptions = []
              list.records.sort((a, b) => {
                return a.code - b.code
              })
              list.records.map((item) => {
                vm.twoTypeOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询五比五拼项目推进数量失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询五比五拼项目推进数量失败:' + res.message)
        })

      getAction(this.url.codeInfoList, { type: '降本增效比拼类型', isdel: 0, pageSize: -1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              vm.competitionTypeOptions = []
              list.records.sort((a, b) => {
                return a.code - b.code
              })
              list.records.map((item) => {
                vm.competitionTypeOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询降本增效比拼类型失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询降本增效比拼类型失败:' + res.message)
        })

      getAction(this.url.codeInfoList, { type: '五比五拼项目经验推广', isdel: 0, pageSize: -1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              vm.threeTypeOptions = []
              list.records.sort((a, b) => {
                return a.code - b.code
              })
              list.records.map((item) => {
                vm.threeTypeOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询五比五拼项目经验推广失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询五比五拼项目经验推广失败:' + res.message)
        })
    },
    initData() {
      if (this.projectBuildId != null && this.projectBuildId != '') {
        var vm = this
        getAction(this.url.queryVOById, { id: this.projectBuildId, changeId: this.changeId })
          .then((res) => {
            if (res.code == 200) {
              var result = res.result
              if (result != null) {
                this.form = result
                if (this.form.hasJoin) {
                  this.initSubType()
                }
                if (this.form.competitionType) {
                  this.competitionType = this.form.competitionType.split(',')
                }

                // drcary
                if (this.form.openRange) {
                  this.outOpenRangeName = this.form.openRange.split(',')
                  this.loadRange(this.form.openRange)
                }
              } else {
                vm.$message.warning('初始化项目信息为空')
              }
            } else {
              this.$message.warning('初始化项目信息失败:' + res.message)
            }
          })
          .catch((res) => {
            this.$message.warning('初始化项目信息失败:' + res.message)
          })
      } else {
        this.loadFinish = true
      }
    },
  },
}
</script>
<style lang="less">
.tooltip_class {
  max-width: 600px !important;
}
</style>
<style lang="less" scoped>
</style>